<!-- D:/project/en2_haiou/haiou-en2-pc/static/images/general -->
<template>
  <div class="combody">
    <div class="topbgcolor borderbox">
      <div class=" container">
        <img class="footbg" src="@/static/images/general/footbg.png" alt="">
      </div>
      <div class=" container">
        <div class="topbox borderbox justify-between flex-row ">
          <div v-for="(item, index) in footlist" :key="index" class="topitem flex-col align-center">
            <div class="toptxt">{{ item.txt }}</div>
            <div class="cenline"></div>
            <div class="number">{{ item.number }}</div>
          </div>
        </div>
        <div class="botbox justify-between flex-row">
          <div class="botitem">
            <div class="tit">COMPANY</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
          </div>
          <div class="botitem">
            <div class="tit">POPULAR CATEGORIES</div>
            <div class="li">Fitness</div>
            <div class="li">Sexual Wellness</div>
            <div class="li">Return, Refund and Cancellation Policy</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
          </div>
          <div class="botitem">
            <div class="tit">POPULAR CATEGORIES</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
          </div>
          <div class="botitem">
            <div class="tit">COMPANY</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
          </div>
          <div class="botitem">
            <div class="tit">SOCIAL</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
            <div class="li">About Netmeds</div>
          </div>
        </div>
      </div>

    </div>
    <div class="bottom align-center justify-center colorfff">
      ucius Pharmaceuticals (Lao) Co.,Ltd All rights reserved
    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      footlist: [
        {
          txt: 'Founding Time ( year )',
          number: '2020'
        },
        {
          txt: 'Floor Area ( Centiare )',
          number: '25000'
        },
        {
          txt: 'Partner ( Nation )',
          number: '12'
        },
        {
          txt: 'Types of drugs ( Kind )',
          number: '200'
        },
      ],
    }
  }

}
</script>

<style lang="scss" scoped>
.combody {
  .topbgcolor {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 40%, rgba(0, 120, 255, 0.1) 100%);
    height: 666px;
    padding-top: 107px;

    .footbg {
      width: 1080px;
    }

    .topbox {
      margin-top: -360px;
      height: 198px;
      border-bottom: 1px solid #E5E8EB;
      padding: 0 48px;

      .topitem {
        .toptxt {
          font-family: Arial, Arial;
          font-weight: 400;
          font-size: 16px;
          color: #616469;
          line-height: 32px;
          text-align: left;
        }

        .cenline {
          width: 40px;
          height: 8px;
          margin: 23px 0;
          background: #0041A3;
        }

        .number {
          font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
          font-weight: bold;
          font-size: 56px;
          color: #0041A3;
          line-height: 56px;
        }
      }
    }

    .botbox {
      margin-top: 55px;

      .tit {
        font-family: Arial, Arial;
        font-weight: bold;
        font-size: 18px;
        color: #2E343E;
        text-align: left;
        margin-bottom: 16px;
      }

      .li {
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 14px;
        color: #2E343E;
        line-height: 24px;
        text-align: left;
        margin-bottom: 4px;
      }
    }
  }

  .bottom {
    background: #0041A3;
    height: 78px;
  }

}
</style>